<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css"> 
        .divAll{ 
          width:800px; 
          font-family:'黑体'; 
          margin:50px auto; 
          } 
        #titles{ 
          font-weight:bold; 
          font-size:18px; 
          height:50px; 
          line-height:50px; 
          background:#FFF9F3; 
          text-align:center;  
          border:1px solid #CCC;; 
          } 
        #contents{ 
           margin-top:20px; 
           background:#FFF9F3; 
           border:1px solid #CCC;; 
           } 
         #form-itemGroup{ 
          padding:10px;  
           } 
         #form-itemGroup label{ 
           display:inline-block; 
           width:100px; 
           height:32px; 
           line-height:32px; 
           color:#666; 
           text-align:right; 
           } 
         #form-itemGroup .userName{ 
           width:200px; 
           height:40px; 
           line-height:40px; 
           border:1px solid #CCC; 
           }   
         #form-itemGroup .default{ 
           width:200px; 
           height:32px; 
           line-height:32px; 
           color:#999; 
           }  
         #form-itemGroup .error{ 
           height:32px; 
           line-height:32px; 
           color:#F00; 
           } 
         #form-itemGroup .success{ 
           height:32px; 
           line-height:32px; 
           color:#096; 
           }  
         .divBtn{ 
           margin-top:20px; 
           margin-left:200px; 
           width:100px; 
           height:32px; 
           line-height:32px; 
           background-color:#F93; 
           margin-bottom:10px; 
           color:#ffffff; 
           font-weight:bold; 
           border:none; 
           } 
       </style>
       <script>
            function checkForm() {
                var username = checkUserName();
                var password = checkPassword();
                var confirmPassword = ConfirmPassword();
                var phone = checkPhone();
                return username && password && confirmPassword && phone;
            }

            // 验证用户名
            function checkUserName(){
                var username = document.getElementById("userName");
                var errname = document.getElementById("nameErr");
                var pattren = /^\w{3,}$/; //用户名至少为3位
                if(username.value.length==0){
                    errname.innerHTML = "用户名不能为空";
                    errname.className = "error";
                    return false;
                }
                //请输入至少3位的用户名(可以使用正则表达式)
                //正则表达式（regular expression）是一个描述字符模式的对象。使用JavaScript正则表达式可以进行强大的模式匹配和文本检索与替换功能。
                // test() 方法用于检测一个字符串是否匹配某个模式.
                // 语法 RegExpObject.test(string)
               if(!pattren.test(username.value)){
                    errname.innerHTML = "用户名不符合规范";
                    errname.className = "error";
                    return false;
               }else {
                    errname.innerHTML = "ok";
                    errname.className = "success";
                    return true;
               }
            }

            // 验证密码
            function checkPassword() {
                var userpassword = document.getElementById("userPasword");
                var errPassword = document.getElementById("passwordErr");
                var pattren = /^\w{4,8}$/; //4到8位的密码
                if(!pattren.test(userpassword.value)) {
                    errPassword.innerHTML = "密码不正确";
                    errPassword.className = "error";
                    return false;
                }else {
                    errPassword.innerHTML = "ok";
                    errPassword.className = "success";
                    return true;
                }
            }

            //验证确认密码
            function ConfirmPassword() {
                var userConPassword = document.getElementById("userConfirmPasword");
                var errConPassword = document.getElementById("conPasswordErr");
                var userpassword = document.getElementById("userPasword");
                if(userpassword.value!=userConPassword.value || userConPassword.value.length==0){
                    errConPassword.innerHTML = "两次输入的密码不一致";
                    errConPassword.className = "error";
                    return false;
                }else {
                    errConPassword.innerHTML = "ok";
                    errConPassword.className = "success";
                    return true;
                }
            }    
            //验证手机号
            function checkPhone() {
                var userPhone = document.getElementById("userPhone");
                var phoneErr = document.getElementById("phoneErr");
                var pattren = /^1[3456789]\d{9}$/; //验证手机号码的正则表达式
                if(!pattren.test(userPhone.value)) {
                    phoneErr.innerHTML = "手机号不正确";
                    phoneErr.className = "error";
                    return false;
                }else {
                    phoneErr.innerHTML = "ok";
                    phoneErr.className = "success";
                    return true;
                }
            }
       </script>
</head>

<body>
    <div class="divAll"> 
        <div id="titles">新用户注册</div> 
        <div id="contents"> 
        <h3>基本信息</h3> 
        <hr width="95%" color="#f2f2f2"/> 
        <form action="#" onsubmit="return checkForm()"> 
         <div id="form-itemGroup"> 
           <label for="userName">用户名：</label> 
           <input type="text" id="userName" class="userName" onblur="checkUserName()" oninput="checkUserName()"> 
           <span class="default" id="nameErr">请输入至少3位的用户名</span> 
         </div> 
         <div id="form-itemGroup"> 
           <label for="userPasword">密码：</label> 
           <input type="password" id="userPasword" class="userName" onblur="checkPassword()" oninput="checkPassword()"> 
           <span class="default" id="passwordErr">请输入4到8位的密码</span> 
         </div> 
         <div id="form-itemGroup"> 
           <label for="userConfirmPasword">确认密码：</label> 
           <input type="password" id="userConfirmPasword" class="userName" onblur="ConfirmPassword()" oninput="ConfirmPassword()"> 
           <span class="default" id="conPasswordErr">请再输入一遍密码</span> 
         </div> 
         <div id="form-itemGroup"> 
           <label for="userPhone">手机号码：</label> 
           <input type="text" id="userPhone" class="userName" onblur="checkPhone()" oninput="checkPhone()"> 
           <span class="default" id="phoneErr">请输入11位手机号码</span> 
         </div> 
         <div> 
          <button type="submit" class="divBtn">注册</button> 
         </div> 
        </form> 
        </div> 
      </div> 

</body>

</html>